<template>
  <!-- 修改应用组件的模板 -->
  <div id="app">
    <!-- 设置路由组件的视图位置 -->
    <!-- <router-view></router-view> -->
    <transition :name="transitionName">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
          <!-- 这里是会被缓存的视图组件 -->
        </router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件 -->
      </router-view>
    </transition>
    <!-- 并放置非路由组件 -->
    <FooterGuide v-show="$route.meta.showFooter" :menu="appInfo"></FooterGuide>
  </div>
</template>

<script>
  import { mapActions, mapState } from "vuex";
  import { loginCheck } from "./util/util.js";
  import FooterGuide from "./components/FooterGuide/FooterGuide.vue";
// 引入底部组件并注册
export default {
  data() {
    return {
      transitionName: "",
      test: "123123"
    };
  },
  computed: {
    ...mapState(["appInfo"])
  },
  // 自定义指令
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  },
  async mounted() {
    // 通过this.$store.dispatch 方法触发调用Action
    this.$store.dispatch("getAddress");

    // this.getAddress()
    this.getUserInfo();
  },
  components: {
    FooterGuide
  },
  methods: {
    ...mapActions(["getUserInfo"])
  },
  mounted() {
    // 首次进入先进行登录验证
    // console.log('触发首次进入的登录验证!');
    // if (this.$route.path != "/login") {
    //   let status  = loginCheck(this);
    //     this.$store.dispatch("getAppInfo", () => {
    //       console.log("这里是回调");
    //     });
    // }
    // action

    window.vueObj = this;
    // console.log('appInfo', this.$store.state.appInfo)
  }
};
</script>


<style lang='less'>
@import "./util/themt.less";
* {
  // color: #303133;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
#app {
  width: 100%;
  height: 100%;
  background: @bg;
}

.content {
  width: 100%;
  height: 100%;
}

.lg-preview-nav-arrow {
  border-color: #ff0000 !important;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.pdfClass {
  width: 100% !important;
}

.mint-searchbar {
  padding: 5px;
}
</style>
